<template>
  <div id="detail">
    <DetailNavBar ref="navBar" @itemClick="itemClick"></DetailNavBar>
    <scroll ref="scroll" class="wrapper" @scroll="contentScroll" :probeType='3' >
      <div class="content">
        <detail-swiper  :swiperImages="swiperImages" @imgLoaded="imgLoaded"></detail-swiper>
        <detail-good-info :goodInfo="goodInfo"></detail-good-info>
        <detail-shop-info :shopInfo="shopInfo"></detail-shop-info>
        <detail-info :detailInfo="detailInfo"  @imgLoaded="imgLoaded"></detail-info>
        <detail-params-info ref="params" :paramsInfo="paramsInfo"></detail-params-info>
        <detail-comment-info ref="comment" :commentInfo="commentInfo"></detail-comment-info>
        <detail-recommend-info ref="recommend" :recommendList="recommendList"></detail-recommend-info>
      </div>
    </scroll>
    <bottom-nav-bar></bottom-nav-bar>
    <back-top @backTop="backTop" v-show="isBackTopShow" />
  </div>
</template>

<script scoped>
  //组件
  import Scroll from 'common/scroll/Scroll'
  import DetailNavBar from './childComps/DetailNavBar'
  import DetailSwiper from './childComps/DetailSwiper'
  import DetailGoodInfo from './childComps/DetailGoodInfo'
  import DetailShopInfo from './childComps/DetailShopInfo'
  import DetailInfo from './childComps/DetailInfo'
  import DetailParamsInfo from './childComps/DetailParamsInfo'
  import DetailCommentInfo from './childComps/DetailCommentInfo'
  import DetailRecommendInfo from './childComps/DetailRecommendInfo'
  import BottomNavBar from './childComps/BottomNavBar'
  import BackTop from "content/backTop/BackTop"
  //数据 函数
  // import {debounce} from 'utils/debounce'
  import {getDtail, getRecommend, Good, GoodParams, Shop} from 'network/detail'
  import {imgListenerMixin} from 'utils/mixin'
  import {BACKTOP_DISTENCE} from "@/utils/constant"
  export default {
    name:"Detail",
    props: ['id'],
    data(){
        return{
          swiperImages: [],
          goodInfo: {},
          shopInfo: {},
          detailInfo: {},
          paramsInfo: {},
          commentInfo: {},
          recommendList: [],
          posY: [],
          getPosY: null,
          currentIndex: 0,
          isBackTopShow: false,
          // imgListener: null
        }
    },
    mixins: [imgListenerMixin],
    components:{
      DetailNavBar,
      DetailSwiper,
      DetailGoodInfo,
      DetailShopInfo,
      Scroll,
      DetailInfo,
      DetailParamsInfo,
      DetailCommentInfo,
      DetailRecommendInfo,
      BottomNavBar,
      BackTop
    },
    created() {
      //  console.log(this.$router);VueRouter
      //  console.log(this.$route.params.id)//{name: undefined, meta: {…}, path: "/detail/1jw0sr2", hash: "", query: {…}, …}
      //获得数据
      this.getDetailInfo()
      this.getRecommendInfo()

      //getPosY函数赋值
      this.getPosY = this._.debounce(() => {
        //获得各个主题的offsetTop值
        this.posY = []
        this.posY.push(0)
        this.posY.push(this.$refs.params.$el.offsetTop)
        this.posY.push(this.$refs.comment.$el.offsetTop)
        this.posY.push(this.$refs.recommend.$el.offsetTop)
        this.posY.push(Number.MAX_VALUE)
        //console.log(this.posY);
      },100)
    },
    // mounted() { 使用mixin代替
    //   let newRefresh = this._.debounce(this.$refs.scroll.refresh,100)
    //   this.imgListener = () => {
    //     newRefresh()
    //   }
    //   this.$bus.$on('imgloaed',this.imgListener)
    // },
    methods: {
      //获得商品信息
      getDetailInfo() {
        getDtail(this.id).then(res => {
          //获得所有信息
          console.log(res);
          let data = res.result
          //获得顶部轮播图信息
          this.swiperImages = data.itemInfo.topImages
          //获得商品信息
          this.goodInfo = new Good(data.itemInfo, data.columns, data.shopInfo.services)
          //获取店铺信息
          this.shopInfo = new Shop(data.shopInfo)
          //商品信息
          this.detailInfo = data.detailInfo
          //参数信息
          this.paramsInfo = new GoodParams(data.itemParams.info, data.itemParams.rule)
          //console.log(this.paramsInfo);

          //商品评论信息
          if (data.rate.list) {
             this.commentInfo = data.rate.list[0]
          }
        })
      },
      //获得推荐图片列表
      getRecommendInfo() {
        getRecommend().then((res,err) => {
          if (err) return
          this.recommendList = res.data.list
          console.log(this.recommendList);

        })
      },

      //事件
      imgLoaded() {
        let newRefresh=this._.debounce(this.$refs.scroll.refresh,100)
        newRefresh()
        this.getPosY()
      },
      itemClick(index) {
        setTimeout(() => {
           this.$refs.scroll.scrollTo(0,-this.posY[index],500)
        },100)
      },
      contentScroll(pos) {
        //1.回到顶部组件是否显示
        this.isBackTopShow = pos.y < -BACKTOP_DISTENCE
       //2.滚动到一定位置，响应主题
       for(let i=0;i<this.posY.length-1;i++) {
         if(this.currentIndex !==i && -pos.y >= this.posY[i] && pos.y < this.posY[i+1]) {
          this.currentIndex = i
          this.$refs.navBar.currentIndex = i
         }
       }
      },
       //回到顶部
      backTop() {
        this.$refs.scroll.scrollTo(0, 0, 500)
      }
    },
    destroyed() {
      this.$bus.$off('imgloaed',this.imgListener)
    }
  }
</script>

<style lang='less' scoped>

  #detail {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    // overflow: hidden;
    z-index: 2;
    .van-swipe {
      height: 6rem;
    }
    .wrapper {
      position: relative;
      height: calc(100% - .88rem - 1rem);
      overflow: hidden;
    }
  }
</style>
